<template>
  <div class="box kindBox">
    <van-nav-bar
      left-arrow
      @click-left="$router.push('/kind')"
    >
      <template #title>
        <van-search placeholder="请输入搜索关键词" shape="round" readonly @click="$router.push('/search')" />
      </template>
    </van-nav-bar>
    <div class="cont">
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item v-for="item in kindList" :key="item" :title="item" />
      </van-sidebar>
      <van-grid :column-num="3">
        <van-grid-item v-for="item in brandList" :key="item" icon="photo-o" :text="item" @click="onSearch(item)" />
      </van-grid>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sidebar, SidebarItem, Grid, GridItem } from 'vant'
import { getKind, getBrand } from '@/request/index.js'

Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Grid)
Vue.use(GridItem)

export default {
  data () {
    return {
      activeKey: 0,
      kindList: [],
      brandList: []
    }
  },
  mounted () {
    getKind({
      column: 'type'
    }).then(data => {
      this.kindList = data.data.data
      getBrand({
        type: this.kindList[this.activeKey]
      }).then(data => {
        this.brandList = data.data.data
      })
    })
  },
  methods: {
    onChange (i) {
      getBrand({
        type: this.kindList[i]
      }).then(data => {
        this.brandList = data.data.data
      })
    },
    onSearch (v) {
      console.log(this.kindList[this.activeKey], v)
      this.$router.push({
        path: '/searchRes',
        query: {
          wd: this.kindList[this.activeKey],
          brand: v
        }
      })
    }
  }
}
</script>

<style lang="scss">
.kindBox{
  .van-sidebar {
    height: 100%;
    background: #f7f8fa;
  }
  .cont{
    display: flex;
    .van-sidebar{
      width: 20vw;
    }
    .van-grid{
      height: 1rem;
      width: 80vw;
    }
  }
}
</style>
